import { Form, Modal, Input } from 'antd';
import { useEffect } from 'react';

import CommonUpload from '@/components/CommonUpload';

import ColorBlock from './components/color';

export function ProductModal({ title, show, formValue, onOk, onCancel }: any) {
  const [form] = Form.useForm();

  useEffect(() => {
    const sizeInfo = JSON.parse(formValue.sizeInfo || '{}');
    form.setFieldsValue({
      ...formValue,
      colors: JSON.parse(formValue.colors || '[]'),
      sizeInfo,
    });
  }, [formValue, form]);

  const handleOk = () => {
    const params = { ...formValue, ...form.getFieldsValue() };
    onOk({
      ...params,
      colors: JSON.stringify(params.colors),
      sizeInfo: JSON.stringify(params.sizeInfo),
    });
  };

  return (
    <Modal title={title} width="90%" open={show} onOk={() => handleOk()} onCancel={onCancel}>
      <Form
        initialValues={formValue}
        form={form}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        layout="horizontal"
      >
        <Form.Item<any> label="商品名称" name="name" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="商品SKU" name="sku" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="商品SPU" name="spu">
          <Input />
        </Form.Item>

        <Form.Item<any> label="商品模型" name="modelUrl" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="商品缩略图" name="thumbs" required>
          <CommonUpload needParse />
        </Form.Item>

        <Form.Item<any> label="上身效果" name="mockupUrls" required>
          <CommonUpload isFile needParse />
        </Form.Item>

        <Form.Item<any> label="重量" name="weight" required>
          <Input suffix="克" />
        </Form.Item>

        <Form.Item<any> label="供应商" name="supplier" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="性别" name="sex" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="面料" name="material" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="面料材质" name="materialName" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="前面印刷费用" name="frontPrintFee" required>
          <Input suffix="元" />
        </Form.Item>

        <Form.Item<any> label="背面印刷费用" name="backPrintFee" required>
          <Input suffix="元" />
        </Form.Item>

        <Form.Item<any> label="面料克重" name="fabricWeight" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="二次工艺名称" name="technology" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="面料门幅" name="fabricDoorWidth" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="款号" name="styleNumber" required>
          <Input />
        </Form.Item>

        <Form.Item<any> label="商品颜色" name="colors" required>
          <ColorBlock />
        </Form.Item>
      </Form>
    </Modal>
  );
}
